<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>购物车</title>
		<link rel="icon" type="image/png" href="http://m.lppz.com/images/favicon.png">
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../lib/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/cart.css"/>
	</head>

	<body ontouchstart>
		<!--头部-->
		<div class="weui_tab">
			<div class="weui-row header">
				<div class="header_prev">
					<a href="#"><i class="iconfont">&#xe6d4;</i></a>
				</div>
				<div class="header_title">购物车</div>
				<div class="header_edit"><span>编辑</span></div>
			</div>
			<section class="lp-content">
				<div class="lp-notice weui_cell">
					<i class="iconfont iconfont-msg"></i>
					<p class="weui_cell_bd weui_cell_primary">单笔订单满68元包邮</p>
				</div>
				<div class="lp-settle weui_cell">
					<div class="lp-checkbox">
						<input class="lp-check" type="checkbox">
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<div class="lp-icon">良</div>
						<p>良品快运</p>
					</div>
					<a href="javascript:;" class="weui_cell_ft">领取优惠券</a>
				</div>
				<div class="lp-news-list weui_cells">
					<div class="weui_cell lp-list-empty">
						<p >您的购物车内还没有任何商品！<br />
						<a href="../index.html">立即逛逛</a></p>
					</div>
					<div class="weui_cell">
						<div class="lp-checkbox">
							<input class="lp-check" type="checkbox">
						</div>
						<div class="weui_cell_bd weui_cell_primary">
							<div class="news-hd">
								<a href="#"><img src=""/></a>
							</div>
							<div class="news-main">
								<h3></h3>
								<span><small>￥</small>2</span>
								<div class="news-count">
									<input type="button" value="-"/>
									<input type="text" value="" class="count-num"/>
									<input type="button" value="+"/>
								</div>
								<button class="news-del" style="display: none;">
									<i class="iconfont iconfont-del2"></i>
								</button>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>	
		<!--底部-->
		<div class="lp-cart-nav weui_cell">
			<div class="cart-check">
				<input type="checkbox" id="checkAll" class="lp-check"/>
			</div>
			<div class="weui_cell_bd weui_cell_primary">
				<p>全选</p>
			</div>
			<div class="weui_cell_ft cart-submit">
				<button class="cart-account">去结算</button>
				<div class="cart_total">
					<p>合计<span>	￥0</span></p>
					<em>积分：0</em>
				</div>
			</div>
		</div>
		<div class="lp-cart-nav" style="display: none;">
			<input type="button" value="删除"  class="del">
			<input type="button" value="移入收藏夹" class="collection">
		</div>
		<script src="../lib/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//返回
				$(".header_prev").click(function(){
					window.history.back();
				})
				//编辑
				$(".header_edit").click(function(){
					if($(".lp-cart-nav:eq(1)")[0].style.display=="none"){
						$(this).html("完成");
						$(".lp-cart-nav:eq(0)").hide();
						$(".lp-cart-nav:eq(1)").show();
						$(".news-count").hide();
						$(".news-del").show();
					}else{
						$(this).html("编辑");
						$(".lp-cart-nav:eq(0)").show()
						$(".lp-cart-nav:eq(1)").hide();
						$(".news-count").show();
						$(".news-del").hide();
					}
				})
				//删除
				$(".del").click(function(){
					$(".lp-news-list .lp-check").is(function(){
						if($(this).prop("checked")){
							var h3 = $(this).parents(".lp-news-list .weui_cell").find("h3");
							$(this).parents(".lp-news-list .weui_cell").remove();
							del_storage(h3.html());
						}
					})
				});
				//结算
				$(".cart-account").click(function(){
//					alert(typeof $(this).css("background-color"));
					if($(this).hasClass("cart-account-enable")){
						if(!localStorage.user){
							$.confirm({
								text : "您还未登录，点击确定登陆",
								onOK: function(){
									window.location.href = "../login/login.html";
								},
								onCancel: function(){
									window.reload();
								}
							})
						}else{
							$.toast("结算成功，您已向柴林成功转了一笔钱");
						}
					}
				})
				//全选
				$(".lp-check").prop("checked",false);
				$(".lp-settle .lp-check").change(function(){
					var flag = $(this).prop("checked");
					$(".lp-news-list .lp-check,.lp-cart-nav .lp-check").prop("checked",flag);
					if(flag){
						$(".cart-account").addClass("cart-account-enable");
					}else{
						$(".cart-account").removeClass("cart-account-enable");
					}
				})
				$(".lp-cart-nav .lp-check").change(function(){
					var flag = $(this).prop("checked");
					$(".lp-settle .lp-check,.lp-news-list .lp-check").prop("checked",flag);
					if(flag){
						$(".cart-account").css("background-color","#E50012");
					}else{
						$(".cart-account").css("background-color","#C8C8C8");
					}
				})
			});
 			//总和监听
			$(function(){
				//购物车内是否有东西
				if(!sessionStorage.goods){
					//空的
					$(".lp-news-list .weui_cell").eq(1).remove();
				}else{
					$(".lp-news-list .weui_cell").eq(0).hide();
					//存在
					var $initCell = $(".lp-news-list .weui_cell").eq(1).clone();
					var $img = $initCell.children(".weui_cell_bd").find(".news-hd img");
					var $name = $initCell.children(".weui_cell_bd").find(".news-main h3");
					var $price = $initCell.children(".weui_cell_bd").find(".news-main span");
					var $num = $initCell.children(".weui_cell_bd").find(".count-num");
					//获得
					var arr = JSON.parse(sessionStorage.goods);
					for(var i = 0; i < arr.length; i++){
						if(arr[i].num!=0){
							$name.html(arr[i].name);
							$price.html("<small>￥</small>"+arr[i].price);
							$num.val(arr[i].num);
							$img.prop("src","../img"+arr[i].src);
							$initCell.clone().appendTo(".lp-news-list");
						}
					}
					$(".lp-news-list .weui_cell").eq(1).remove();
					onPrice();
				}
				$(".news-del").click(function(){
					$(this).parents(".lp-news-list .weui_cell").remove();
					var h3 = $(this).parent().find("h3");
					del_storage(h3.html());
				})
			});
			//加减数量
			$(function(){
				$(".news-count input:nth-child(1)").click(function(){
					var num = parseInt($(this).next().val());
					num -= 1;
					$(this).next().val(num);
					if(num <= 1){
						$(this).next().val(1);
						$.toast("数量不能小于1","forbidden");
					}
					onPrice();
					on_storage($(this));
				})
				$(".news-count input:nth-child(3)").click(function(){
					var num = parseInt($(this).prev().val());
					num += 1;
					$(this).prev().val(num);
					onPrice();
					on_storage($(this));
				})
			})
			//删除监听
			function del_storage(dname){
				var arr = JSON.parse(sessionStorage.goods);
				for(var i in arr){
					if(arr[i].name == dname){
						arr.splice(i,1);
					}
				}
				if(arr == ""){
					sessionStorage.clear();
					$(".lp-list-empty").show();
					$(".cart_total span").html(":￥0");
				}else{
					sessionStorage.goods = JSON.stringify(arr);
				}
			}
			//价格监听
			function onPrice(){
				var $price = $(".news-main span").text().split("￥");
				var total = 0; 
				for(var i = 0; i < $(".news-main span").length; i++){	
					total += parseFloat($price[i+1] * $(".count-num").eq(i).val());
				}
				$(".cart_total span").html(":￥"+total.toFixed(2));
			}
			//改变数字时存储监听
			function on_storage(obj){
				var h3 = obj.parents(".lp-news-list .weui_cell").find("h3").html();
				var onum = obj.parent().find(".count-num").val();
				var arr = JSON.parse(sessionStorage.goods);
				for(var i in arr){
					if(arr[i].name == h3){
						arr[i].num = onum;
						if(arr[i].num == 0){
							arr.splice(i,1);
						}
					}
				}
				if(arr == ""){
					sessionStorage.clear();
				}else{
					sessionStorage.goods = JSON.stringify(arr);
				}
			}
		</script>
	</body>

</html>;